<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Element</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,900,300italic,400italic,600italic,700italic,900italic' rel='stylesheet' type='text/css' />
  <link rel="stylesheet" href="css/icomoon.css" />

  <link rel="stylesheet" href="css/superfish.css" />
  <link rel="stylesheet" href="style.css" />

  <link rel="stylesheet" href="css/responsive.css" />
  	<!--[if IE 9]>
  		<style type="text/css">
  			.kp-dropcap li:first-letter {
				padding-left: 8px;
				padding-right: 8px;
			}
  		</style>
  	<![endif]-->
	<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="css/ie.css">
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<script src="js/PIE_IE678.js"></script>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
	<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body class="kp-element">
<header id="header-page">
  	<div class="top-header">
  		<div class="container">
	  		<div id="logo">
	  			<a href="index.html"><img src="images/logo.png" alt="logo" /></a>
	  		</div>
	  		<nav class="pull-right">
	  			<ul class="sf-menu" id="main-menu">
			      <li class="current-item-menu">
			        <a href="index.html">Home</a>
			      </li>
			      <li>
			        <a href="blog.html">Page</a>
			        	<ul>
			              <li><a href="blog.html">Blog</a>
			              	<ul>
			              		<li><a href="blog.html">Blog</a></li>
			              		<li><a href="blog-1-sidebar.html">Blog 1 sidebar</a></li>
			              	</ul>
			              </li>
			              <li><a href="element.html">Element</a></li>
			              <li><a href="single.html">Single</a>
			              		<ul>
			              			<li><a href="single.html">Single</a></li>
			              			<li><a href="single-1-sidebar.html">Single 1 sidebar</a></li>
			              			<li><a href="single-video.html">Single video</a></li>
			              			<li><a href="single-audio.html">Single audio</a></li>
			              			<li><a href="single-gallery.html">Single gallery</a></li>
			              			<li><a href="single-soundcloud.html">Single soundcloud</a></li>
			              		</ul>
			              </li>
			              <li><a href="404.html">Page 404</a></li>
			            </ul>
			      </li>
			      <li>
			        <a href="#">Fashion</a>
			      </li>
			      <li>
			        <a href="#">Movie</a>
			      </li>
			      <li>
			        <a href="contact.html">Contact</a>
			      </li> 
			    </ul>
			    <div id="mobile-menu">
			          <span>Menu</span>
			          <ul id="toggle-view-menu">
			              <li class="clearfix">
			                  <h3><a href="#">Home</a></h3>
			                  <span>+</span>
			                  <div class="clearfix"></div>
			                  <div class="menu-panel clearfix">
			                      <ul>
			                          <li><a href="index.html">Index style 1</a></li>
			                          <li><a href="index-2.html">Index style 2</a></li>
			                          <li><a href="index-3.html">Index style 3</a></li>
			                      </ul>
			                  </div>
			              </li>
			              <li class="clearfix">
			                  <h3><a href="#">Pages</a></h3>
			                  <span>+</span>
			                  <div class="clearfix"></div>                    
			                  <div class="menu-panel clearfix">
			                      <ul>
			                          <li><a href="about.html">About page</a></li>
			                          <li><a href="elements.html">Elements page</a></li>
			                          <li><a href="404.html">404 page</a></li>
			                      </ul>
			                  </div>
			              </li>
			              <li class="clearfix">
			                  <h3><a href="#">Portfolio</a></h3>
			                  <span>+</span>
			                  <div class="clearfix"></div>                    
			                  <div class="menu-panel clearfix">
			                      <ul>
			                          <li><a href="portfolio-3col.html">Portfolio 3 column</a></li>
			                          <li><a href="portfolio-2col.html">Portfolio 2 column</a></li>
			                          <li><a href="portfolio-1col.html">Portfolio 1 column</a></li>
			                          <li>
			                              <a href="#">Portfolio detail</a>
			                              <ul>
			                                  <li><a href="portfolio-detail.html">Portfolio single</a></li>
			                                  <li><a href="portfolio-audio.html">Portfolio audio</a></li>
			                                  <li><a href="portfolio-gallery.html">Portfolio gallery</a></li>
			                                  <li><a href="portfolio-video.html">Portfolio video</a></li>
			                                  <li><a href="portfolio-soundcloud.html">Portfolio soundcloud</a></li>
			                              </ul>
			                          </li>
			                      </ul>
			                  </div>
			              </li>
			              <li class="clearfix">
			                  <h3><a href="#">Blog</a></h3>
			                  <span>+</span>
			                  <div class="clearfix"></div>                    
			                  <div class="menu-panel clearfix">
			                      <ul>
			                          <li>
			                              <a href="#">Blog style 1</a>
			                              <ul>
			                                  <li><a href="blog-1-left-sidebar.html">Width left sidebar</a></li>
			                                  <li><a href="blog-1-right-sidebar.html">Width right sidebar</a></li>
			                                  <li><a href="blog-1-two-sidebar.html">Width two sidebar</a></li>
			                              </ul>
			                          </li>
			                          <li><a href="blog-2.html">Blog style 2</a></li>
			                          <li>
			                              <a href="#">Blog style 3</a>
			                              <ul>
			                                  <li><a href="blog-3-one-sidebar.html">Width one sidebar</a></li>
			                                  <li><a href="blog-3-two-sidebar.html">Width two sidebar</a></li>
			                              </ul>
			                          </li>
			                          <li>
			                              <a href="#">Blog single</a>
			                              <ul>
			                                  <li><a href="single-1.html">Single style 1</a></li>
			                                  <li><a href="single-2.html">Single style 2</a></li>
			                                  <li><a href="single-3.html">Single style 3</a></li>
			                                  <li><a href="single-4.html">Single style 4</a></li>
			                              </ul>
			                          </li>
			                      </ul>
			                  </div>
			              </li>
			              <li class="clearfix"><h3><a href="contact.html">Contact</a></h3></li>                   
			          </ul><!--toggle-view-menu-->
			    </div><!--mobile-menu-->
	  		</nav>
	  		<div class="clearfix"></div>
  		</div>
  		<!-- container -->
  	</div>
  	<!-- top-header -->
  	<div class="bottom-header">
  	<div class="container">
  		<div class="top-news pull-left">
  			<span>SPECIAL TOPICS</span>
  			<div class="list_carousel">
			  <ul class="carousel-1">
			    <li><a href="#">Gallery: “Bond Girls” Through The Years...</a></li>
			    <li><a href="#">Gallery: “Bond Girls” Through The Years...</a></li>
			    <li><a href="#">Gallery: “Bond Girls” Through The Years...</a></li>
			    <li><a href="#">Gallery: “Bond Girls” Through The Years...</a></li>
			    <li><a href="#">Gallery: “Bond Girls” Through The Years...</a></li>
			  </ul>
			  <div class="clearfix"></div>
			</div>
			<!-- list_carousel -->
  		</div>
  		<!-- top news -->
		<div class="search-box pull-right">
			<form action="/" method="post" />
				<div class="form-group">
					<label for="s" class="hide">search text</label>
					<input type="text" name="search-text" class="form-control" id="s" placeholder="Search here" />
				</div>
				<button type="submit"><span class="icon-search"></span></button>
			</form>
		</div>
		</div>
  		<!-- container -->
  	</div>
  	<!-- bottom-header -->
</header>
<!-- header-page -->
<div id="content" class="container clearfix">
	<div class="main-top">
		<div class="col-area-1 pull-left">
			<div class="widget widget-social">
				<ul class="list-unstyled clearfix">
					<li><a href="#" class="pull-left"><span class="icon-feed"></span></a><span>1234</span></li>
					<li><a href="#" class="pull-left"><span class="icon-twitter"></span></a><span>1234</span></li>
					<li><a href="#" class="pull-left"><span class="icon-facebook"></span></a><span>1234</span></li>
				</ul>
			</div>
			<!-- widget-social -->
		</div>
		<!-- col-area-1 -->
		<div class="col-area-2 pull-left">
			<div class="widget newsletter clearfix">
				<i class="icon-mail pull-left"></i>
				<h2 class="pull-left"><span>newsletter </span>Stay up - to date with the latest news and other stuffs, Sign Up today!</h2>
				<div class="newsletter-form pull-right">
					<form action="/" method="post" />
						<div class="form-group">
							<label for="d" class="hide">email</label>
							<input type="text" name="" value="" class="form-control" id="d" placeholder="Email Adress" />
						</div>
						<input type="submit" name="" value="SIGN UP" />
					</form>
				</div>
				<!-- newsletter-form -->
			</div>
			<!-- newsletter -->
		</div>
		<!-- col-area-2 -->
		<div class="clearfix"></div>
	</div>
	<!-- main-top -->
	<div id="main-content">
			<div class="page-content clearfix">
				<div class="kp-breadcrumb">
					<ol class="breadcrumb">
					  <li><span>You are here:</span><a href="#">Home</a></li>
					  <li class="active">Blog</li>
					</ol>
					<span></span>
				</div>	
				<!-- kp-breadcrumb -->
				<div class="row">
					<div class="col-6">
						<h2 class="title-element">tab</h2>
						<div class="tabs">
						  <ul>
						    <li><a href="#tabs-1">Tab one</a></li>
						    <li><a href="#tabs-2">Tab two</a></li>
						    <li><a href="#tabs-3">Tab threee</a></li>
						  </ul>
						  <div id="tabs-1">
						    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing.</p>
						  </div>
						  <div id="tabs-2">
						    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing.</p>
						  </div>
						  <div id="tabs-3">
						    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium.</p>
						  </div>
						</div>
					</div>
					<div class="col-6">
						<h2 class="title-element">dropcaps</h2>
						<ul class="list-unstyled kp-dropcap">
							<li class="style-1">aorem ipsum dolor sit amet, consectetur adipiscing elit. duis nec purus tellus.</li>
							<li class="style-1">borem ipsum dolor sit amet, consectetur adipiscing elit. duis nec purus tellus.</li>
							<li class="style-2">corem ipsum dolor sit amet, consectetur adipiscing elit. duis nec purus tellus.</li>
							<li class="style-2">dorem ipsum dolor sit amet, consectetur adipiscing elit. duis nec purus tellus</li>
						</ul>
					</div>
				</div>
				<div class="row">
					<div class="col-6">
						<h2 class="title-element">Accordion style 1</h2>
						<div class="accordion-style-1">
						  <h2 class="widget-title"><span class="icon-list pull-left"></span>Accordion title 1</h2>
						  <div>
						    <p>
						    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
						    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
						    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
						    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
						    </p>
						  </div>
						  <h2 class="widget-title"><span class="icon-list pull-left"></span>Accordion title 2</h2>
						  <div>
						    <p>
						    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
						    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
						    velit, faucibus interdum tellus libero ac justo. 
						    </p>
						  </div>
						  <h2 class="widget-title"><span class="icon-list pull-left"></span>Accordion title 3</h2>
						  <div>
						    <p>
						    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
						    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
						    ac tellus pellentesque semper. 
						    </p>
						  </div>
						</div>
					</div>
					<div class="col-6">
						<h2 class="title-element">Accordion style 1</h2>
						<div class="accordion-style-2">
						  <h2 class="widget-title"><span class="icon-list pull-left"></span>Accordion title 1</h2>
						  <div>
						    <p>
						    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
						    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
						    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
						    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
						    </p>
						  </div>
						  <h2 class="widget-title"><span class="icon-list pull-left"></span>Accordion title 2</h2>
						  <div>
						    <p>
						    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
						    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
						    velit, faucibus interdum tellus libero ac justo. 
						    </p>
						  </div>
						  <h2 class="widget-title"><span class="icon-list pull-left"></span>Accordion title 3</h2>
						  <div>
						    <p>
						    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
						    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
						    ac tellus pellentesque semper. 
						    </p>
						  </div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-6">
						<h2 class="title-element">button</h2>
						<ul class="list-unstyled kp-button">
							<li>
								<span class="btn btn-small">Small button</span>
								<span class="btn btn-small btn-color">Small button</span>
							</li>
							<li>
								<span class="btn btn-medium">Medium</span>
								<span class="btn btn-medium btn-color">Medium</span>
							</li>
							<li>
								<span class="btn btn-big">Big button</span>
								<span class="btn btn-big btn-color">Big button</span>
							</li>
						</ul>
					</div>
					<div class="col-6">
						<h2 class="title-element">Accordion style 1</h2>
						<div class="toggle">
						  <h2 class="widget-title"><span class="icon-list pull-left"></span>Toggle title 1</h2>
						  <div>
						    <p>
						    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
						    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
						    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
						    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
						    </p>
						  </div>
						  <h2 class="widget-title"><span class="icon-list pull-left"></span>Toggle title 2</h2>
						  <div>
						    <p>
						    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
						    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
						    velit, faucibus interdum tellus libero ac justo. 
						    </p>
						  </div>
						  <h2 class="widget-title"><span class="icon-list pull-left"></span>Toggle title 3</h2>
						  <div>
						    <p>
						    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
						    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
						    ac tellus pellentesque semper. 
						    </p>
						  </div>
						</div>
					</div>
				</div>
				<div class="row">
					<div class="col-12">
						<h2 class="title-element">1 sidebar</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium dignissim metus at tempus. Mauris in elit in urna bibendum tincidunt ac eget velit. Quisque eget metus sed mi sollicitudin pretium. Fusce et leo ligula. Aliquam blandit cursus luctus. Ut a metus dolor, vel egestas nulla. Aliquam ultrices pretium risus vel tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium dignissim metus at tempus. Mauris in elit in urna bibendum tincidunt ac eget velit.</p>
					</div>
				</div>
				<div class="row">
					<div class="col-12">
						<h2 class="title-element">one half</h2>		
					</div>
					<div class="col-6">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium dignissim metus at tempus. Mauris in elit in urna bibendum tincidunt ac eget velit. Quisque eget metus sed mi sollicitudin pretium. Fusce et leo ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium dignissim metus at tempus. Mauris in elit in urna bibendum tincidunt ac eget velit. Quisque eget metus sed mi sollicitudin pretium. Fusce et leo ligula. </p>
					</div>
					<div class="col-6">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium dignissim metus at tempus. Mauris in elit in urna bibendum tincidunt ac eget velit. Quisque eget metus sed mi sollicitudin pretium. Fusce et leo ligula. </p>
					</div>
				</div>
				<div class="row">
					<div class="col-12">
						<h2 class="title-element">one third</h2>		
					</div>
					<div class="col-4">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium dignissim metus at tempus. Mauris in elit in urna bibendum tincidunt ac eget velit. Quisque eget metus sed mi sollicitudin pretium. Fusce et leo ligula. </p>
					</div>
					<div class="col-4">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium dignissim metus at tempus. Mauris in elit in urna bibendum tincidunt ac eget velit. Quisque eget metus sed mi sollicitudin pretium. Fusce et leo ligula. </p>
					</div>
					<div class="col-4">
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium dignissim metus at tempus. Mauris in elit in urna bibendum tincidunt ac eget velit. Quisque eget metus sed mi sollicitudin pretium. Fusce et leo ligula. </p>
					</div>
				</div>
				<div class="row">
					<div class="col-12 kp-heading">
						<h2 class="title-element">heading</h2>
						<h1>Heading 1</h1>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium dignissim metus at tempus. Mauris in elit in urna bibendum tincidunt ac eget velit. Quisque eget metus sed mi sollicitudin pretium. Fusce et leo ligula. Aliquam blandit cursus luctus. Ut a metus dolor, vel egestas nulla. </p>
						<h2>Heading 2</h2>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium dignissim metus at tempus. Mauris in elit in urna bibendum tincidunt ac eget velit. Quisque eget metus sed mi sollicitudin pretium. Fusce et leo ligula. Aliquam blandit cursus luctus. Ut a metus dolor, vel egestas nulla. </p>
						<h3>Heading 3</h3>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium dignissim metus at tempus. Mauris in elit in urna bibendum tincidunt ac eget velit. Quisque eget metus sed mi sollicitudin pretium. Fusce et leo ligula. Aliquam blandit cursus luctus. Ut a metus dolor, vel egestas nulla. </p>
						<h4>Heading 4</h4>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium dignissim metus at tempus. Mauris in elit in urna bibendum tincidunt ac eget velit. Quisque eget metus sed mi sollicitudin pretium. Fusce et leo ligula. Aliquam blandit cursus luctus. Ut a metus dolor, vel egestas nulla. </p>
						<h5>Heading 5</h5>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium dignissim metus at tempus. Mauris in elit in urna bibendum tincidunt ac eget velit. Quisque eget metus sed mi sollicitudin pretium. Fusce et leo ligula. Aliquam blandit cursus luctus. Ut a metus dolor, vel egestas nulla. </p>
						<h6>Heading 6</h6>
						<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium dignissim metus at tempus. Mauris in elit in urna bibendum tincidunt ac eget velit. Quisque eget metus sed mi sollicitudin pretium. Fusce et leo ligula. Aliquam blandit cursus luctus. Ut a metus dolor, vel egestas nulla. </p>
					</div>
				</div>
				<div class="row">
					<div class="col-12">
						<h2 class="title-element">blockquote</h2>
						<blockquote>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pretium dignissim metus at tempus. Mauris in elit in urna biben dum tincidunt ac eget velit. Quisque eget metus sed mi sollicitudin pretium. Fusce et leo ligula. </blockquote>
					</div>
				</div>
			</div>
			<!-- list-post -->
		
		
	</div>
	<!-- main-content -->
	<div id="sidebar" class="pull-left">
		<div class="widget widget-list-news">
			<div class="accordion-defaul">
			  <h2 class="widget-title"><span class="icon-list pull-left"></span>TOPPing ALL CHARTS</h2>
			  <div>
			    <ul class="list-unstyled">
			    	<li class="clearfix">
			    		<span>1</span><a href="#">Section 1.10.32 of "de Finibus Bonorum"</a>
			    	</li>
			    	<li class="clearfix">
			    		<span>2</span><a href="#">Section 1.10.32 of "de Finibus Bonorum" </a>
			    	</li>
			    	<li class="clearfix">
			    		<span>3</span><a href="#">The standard Lorem Ipsum passage</a>
			    	</li>
			    	<li class="clearfix">
			    		<span>4</span><a href="#">Section 1.10.32 of "de Finibus Bonorum"</a>
			    	</li>
			    	<li class="clearfix">
			    		<span>5</span><a href="#">Section 1.10.32 of "de Finibus Bonorum"</a>
			    	</li>
			    </ul>
			  </div>
			  <h2 class="widget-title"><span class="icon-compose pull-left"></span>HOT OFF THE PRESS</h2>
			  <div>
			    <ul class="list-unstyled">
			    	<li class="clearfix">
			    		<span>1</span><a href="#">Section 1.10.32 of "de Finibus Bonorum"</a>
			    	</li>
			    	<li class="clearfix">
			    		<span>2</span><a href="#">Section 1.10.32 of "de Finibus Bonorum" </a>
			    	</li>
			    	<li class="clearfix">
			    		<span>3</span><a href="#">The standard Lorem Ipsum passage</a>
			    	</li>
			    	<li class="clearfix">
			    		<span>4</span><a href="#">Section 1.10.32 of "de Finibus Bonorum"</a>
			    	</li>
			    	<li class="clearfix">
			    		<span>5</span><a href="#">Section 1.10.32 of "de Finibus Bonorum"</a>
			    	</li>
			    </ul>
			  </div>
			  <h2 class="widget-title"><span class="icon-film pull-left"></span>BEST MOVIES</h2>
			  <div>
			    <ul class="list-unstyled">
			    	<li class="clearfix">
			    		<span>1</span><a href="#">Section 1.10.32 of "de Finibus Bonorum"</a>
			    	</li>
			    	<li class="clearfix">
			    		<span>2</span><a href="#">Section 1.10.32 of "de Finibus Bonorum" </a>
			    	</li>
			    	<li class="clearfix">
			    		<span>3</span><a href="#">The standard Lorem Ipsum passage</a>
			    	</li>
			    	<li class="clearfix">
			    		<span>4</span><a href="#">Section 1.10.32 of "de Finibus Bonorum"</a>
			    	</li>
			    	<li class="clearfix">
			    		<span>5</span><a href="#">Section 1.10.32 of "de Finibus Bonorum"</a>
			    	</li>
			    </ul>
			  </div>
			</div>
		</div>
		<!-- widget-list-news -->
		<div class="widget widget-list-images-news">
			<div class="accordion-defaul">
			  <h2 class="widget-title"><span class="icon-notebook pull-left"></span>popular article</h2>
			  <div>
			    <ul class="list-unstyled">
						<li>
							<div class="item clearfix">
								<a href="#" class="pull-left"><img src="placeholders/posts/img.jpg" alt="" /></a>
								<div class="item-right">
									<h4><a href="#">Nearly free, sent back to North</a></h4>
									<ul class="list-inline kp-metadata clearfix">
										<li class="kp-time">10 Sep 2013</li>
										<li class="kp-view"><span class="icon-eye pull-left"></span>50 View</li>
									</ul>
								</div>
							</div>
						</li>
						<li>
							<div class="item clearfix">
								<a href="#" class="pull-left"><img src="placeholders/posts/img-1.jpg" alt="" /></a>
								<div class="item-right">
									<h4><a href="#">Nearly free, sent back to North</a></h4>
									<ul class="list-inline kp-metadata clearfix">
										<li class="kp-time">10 Sep 2013</li>
										<li class="kp-view"><span class="icon-eye pull-left"></span>50 View</li>
									</ul>
								</div>
							</div>
						</li>
						<li>
							<div class="item clearfix">
								<a href="#" class="pull-left"><img src="placeholders/posts/img-8.jpg" alt="" /></a>
								<div class="item-right">
									<h4><a href="#">Nearly free, sent back to North</a></h4>
									<ul class="list-inline kp-metadata clearfix">
										<li class="kp-time">10 Sep 2013</li>
										<li class="kp-view"><span class="icon-eye pull-left"></span>50 View</li>
									</ul>
								</div>
							</div>
						</li>
						<li>
							<div class="item clearfix">
								<a href="#" class="pull-left"><img src="placeholders/posts/img-9.jpg" alt="" /></a>
								<div class="item-right">
									<h4><a href="#">Nearly free, sent back to North</a></h4>
									<ul class="list-inline kp-metadata clearfix">
										<li class="kp-time">10 Sep 2013</li>
										<li class="kp-view"><span class="icon-eye pull-left"></span>50 View</li>
									</ul>
								</div>
							</div>
						</li>
					</ul>
			  </div>
			  <h2 class="widget-title"><span class="icon-chat pull-left"></span>recent post</h2>
			  <div>
			    <ul class="list-unstyled">
						<li>
							<div class="item clearfix">
								<a href="#" class="pull-left"><img src="placeholders/posts/img.jpg" alt="" /></a>
								<div class="item-right">
									<h4><a href="#">Nearly free, sent back to North</a></h4>
									<ul class="list-inline kp-metadata clearfix">
										<li class="kp-time">10 Sep 2013</li>
										<li class="kp-view"><span class="icon-eye pull-left"></span>50 View</li>
									</ul>
								</div>
							</div>
						</li>
						<li>
							<div class="item clearfix">
								<a href="#" class="pull-left"><img src="placeholders/posts/img-1.jpg" alt="" /></a>
								<div class="item-right">
									<h4><a href="#">Nearly free, sent back to North</a></h4>
									<ul class="list-inline kp-metadata clearfix">
										<li class="kp-time">10 Sep 2013</li>
										<li class="kp-view"><span class="icon-eye pull-left"></span>50 View</li>
									</ul>
								</div>
							</div>
						</li>
						<li>
							<div class="item clearfix">
								<a href="#" class="pull-left"><img src="placeholders/posts/img-8.jpg" alt="" /></a>
								<div class="item-right">
									<h4><a href="#">Nearly free, sent back to North</a></h4>
									<ul class="list-inline kp-metadata clearfix">
										<li class="kp-time">10 Sep 2013</li>
										<li class="kp-view"><span class="icon-eye pull-left"></span>50 View</li>
									</ul>
								</div>
							</div>
						</li>
						<li>
							<div class="item clearfix">
								<a href="#" class="pull-left"><img src="placeholders/posts/img-9.jpg" alt="" /></a>
								<div class="item-right">
									<h4><a href="#">Nearly free, sent back to North</a></h4>
									<ul class="list-inline kp-metadata clearfix">
										<li class="kp-time">10 Sep 2013</li>
										<li class="kp-view"><span class="icon-eye pull-left"></span>50 View</li>
									</ul>
								</div>
							</div>
						</li>
					</ul>
			  </div>
			</div>
		</div>
		<!-- widget-list-news -->
		<div class="widget widget-facebook">
			<h2 class="widget-title"><span class="icon-thumbs-up2 pull-left"></span>LIKE US ON FACEBOOK</h2>

			<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fkopatheme&amp;width=250&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=false&amp;show_border=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:250px; height:258px;" allowtransparency="true"></iframe>
		</div>
		<!-- widget-facebook -->
		<div class="widget widget_archive">
			<h2 class="widget-title"><span class="icon-drawer pull-left"></span>Archives</h2>
			<ul class="list-unstyled">
				<li>
					<a href="#">September 2013 (20)</a>
				</li>
				<li>
					<a href="#">March 2013 (20)</a>
				</li>
				<li>
					<a href="#">February 2013 (20)</a>
				</li>
				<li>
					<a href="#">January 2013 (20)</a>
				</li>
				<li>
					<a href="#">December 2013 (20)</a>
				</li>
				<li>
					<a href="#">November 2013 (20)</a>
				</li>
			</ul>
		</div>
		<!-- widget-archives -->
	</div>
	<!-- sidebar -->
</div>
<!-- container -->
<div id="bottom-sidebar">
	<div class="container clearfix">
		<div class="col-area-5">
		<a href="#" class="bottom-logo"><img src="images/logo.png" alt="" /></a>
			<div class="widget widget-text">
				<p>Kopasoft  is a clean, powerful and responsive wordpress magazine / news theme.</p>
				<p>It was popularised in the 1960s with the release of Letraset sheets containing</p>
				<p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC...</p>
			</div>
			<!-- widget-text -->
		</div>
		<!-- col-area-5 -->
		<div class="col-area-6">
			<div class="widget widget-flickr">
				<h2 class="widget-title">photo on flickr</h2>
				<div class="widget-content">
					<div class="flickr-wrap clearfix" id="flickr-feed-1">
				        <ul class="clearfix list-unstyled"></ul>
				    </div><!--flickr-wrap-->
				</div>
				<!-- widget-content -->
			</div>
			<!-- widget-flickr -->
		</div>
		<!-- col-area-6 -->
		<div class="col-area-7">
			<div class="widget widget_categories">
				<h2 class="widget-title">categories</h2>
					<ul class="list-unstyled">
					<li>
						<a href="#">Business(10)</a>
					</li>
					<li>
						<a href="#">Health(10)</a>
					</li>
					<li>
						<a href="#">Movies(10)</a>
					</li>
					<li>
						<a href="#">Graphic Design(10)</a>
					</li>
					<li>
						<a href="#">Politics(10)</a>
					</li>
					<li>
						<a href="#">Technology(10)</a>
					</li>
				</ul>
	
			</div>
			<!-- widget-cat -->
		</div>
		<!-- col-area-7 -->
		<div class="col-area-8">
			<div class="widget widget_pages">
				<h2 class="widget-title">page</h2>
					<ul class="list-unstyled">
					<li>
						<a href="#">Archive</a>
					</li>
					<li>
						<a href="#">Advertise With Us</a>
					</li>
					<li>
						<a href="#">Contact</a>
					</li>
					<li>
						<a href="#">Log In</a>
					</li>
					<li>
						<a href="#">Privacy Policy</a>
					</li>
					<li>
						<a href="#">Sitemap</a>
					</li>
				</ul>
			</div>
			<!-- widget-cat -->
		</div>
		<!-- col-area-8 -->
		<div class="col-area-9">
			<div class="widget widget-contact">
				<h2 class="widget-title">contact us</h2>
				<div class="widget-content">
					<span>Envanto headquaters</span>
					<ul class="list-unstyled">
						<li class="clearfix"><span class="icon-location pull-left"></span> Elizabeth St, Melbourne, Victoria 3000 Australi</li>
						<li class="clearfix"><span class="icon-phone pull-left"></span> +61 (0) 3 8376 6286</li>
						<li class="clearfix"><span class="icon-mail pull-left"></span><a href="mailto:kopasof@gmail.com">mail@yoursite.com</a> </li>
					</ul>
				</div>
			</div>
			<!-- widget contact -->
		</div>
		<!-- col-area-9 -->
	</div>
	<!-- container -->
</div>
<!-- bottom-sidebar -->
<footer id="page-footer">
	<div class="container">
		<p class="copy-right pull-left"> Copyright 2013 - <span>Kopasoft</span>.  All Rights Reserved</p>
		<ul class="pull-right list-inline">
			<li><a href="#" class="icon-facebook"></a></li>
			<li><a href="#" class="icon-flickr"></a></li>
			<li><a href="#" class="icon-vimeo"></a></li>
			<li><a href="#" class="icon-dribbble"></a></li>
			<li><a href="#" class="icon-twitter"></a></li>
		</ul>
	</div>
</footer>
<!-- page footer -->
<span class="back-to-top icon-arrow-up"></span>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="js/superfish.js"></script>
<script src="js/jquery.carousel-6.2.1.js"></script>
<script src="js/jflickrfeed.min.js"></script>
<script src="js/tweetable.jquery.js"></script>
<script src="js/jquery.timeago.js"></script>
<script src="js/jquery.form.js"></script>
<script src="js/jquery.validate.min.js"></script>
<script src="js/custom.js"></script>
</body>
</html>